/*
 * @Description:
 * @Author: dh
 * @Date: 2022-01-24 13:55:07
 * @LastEditors: dh
 * @LastEditTime: 2022-04-13 13:59:33
 */

// .css()
// 取/加(累加) CSS样式、
var width = $('.warapper ul>li')
	.css('border', '1px solid red')
	.css({
		width: 100,
		height: '30px',
		'line-height': '30px',
	})
	.css('width', '+=100')
	.css('width')
console.log(width) // 200px

// .attr()
// 获取/设置(自定义) 标签属性、
var id = $('.warapper').attr('id', 'demo').attr('id')
console.log(id) // demo

// .prop()
// 读取/设置标签中的特性、  等同于 DOM元素对象[属性值] = 'text'
// 注意：如果被腻值的是自定义的属性值(非映射关于)。将不在标签中显现、
var is = $('input').prop('checked')
var is = $('input').prop('checked', true)
console.log(is) // true/false

// .val()
// 获取/设置 表单相关元素的value值、
var val = $('textarea').val('Text').val()
console.log(val) // Text
// 方法二：依次遍历
var val = $('textarea').val(function (index, oValue) {
	// 返回str就会改变当前选择的value值、
	return index + ' - ' + oValue
})

// .html()
// 设置/返回html标签、
// 特点， 多个标签只能读取第一个、 赋值可以同时多个、
$('ol').html('<li>demo</li>')
var html = $('ol>li').html()
console.log(html)
$('ol>li').html(function (index, ele) {
	console.log(index, ele)
	return index + '-' + ele
})

// .text()
// 设置/返回text文本、
// 特点， 只返回标签中的文本、选中多个则拼接起来、
$('ol>li').text('demo')
var text = $('ol>li').text()
console.log(text)
$('ol>li').text(function (index, ele) {
	console.log(index, ele)
	return index + '-' + ele
})

// .addClass()
// 给元素对象添加1/n个Class属性值、
$('div.demo').eq(0).addClass('a1 a2 a3')
$('div.demo').addClass(function (index, ele) {
	console.log(index, ele)
	return 'test-' + index // 不覆盖、会叠加
})

// .removeClass()
// 清除1/n个Class属性值、
$('div.demo').eq(0).removeClass('a1 a3') // 填写要清除的Class值、
$('div.demo').eq(0).removeClass() // 如果不填会清除全部、
$('div.demo').removeClass(function (index, ele) {
	console.log(index, ele)
	return ele // 清除被返回的Class属性值、
})

// .hasClass()
// 判断被选中的元素对象中，是否含有特定的Class值、返回：true/false
$('div.demo').hasClass('kk')

// .next()
$('button').click(function () {
	// .next()  选择this同级下一个元素节点、(可以加限制条件)
	$(this).next('p').css({ color: 'red' })
})

// .prev()
$('button').click(function () {
	// .prev()  选择this同级上一个元素节点、(可以加限制条件)
	$(this).prev('p').css({ color: 'red' })
})

// .nextAll()
$('button').click(function () {
	// .nextAll()  选择在this以下所有同级元素节点、(可以加限制条件)
	$(this).nextAll('p.red').css({ color: 'red' })
})

// prevAll()
$('button').click(function () {
	// .prevAll()  选择在this以上所有同级元素节点、(可以加限制条件)
	$(this).prevAll('p.red').css({ color: 'red' })
})

// .nextUntil()
$('#test>li').click(function () {
	// 选择在this以下到指定(.end)截止的同级元素节点、可选参数：附加一个筛选条件(.li-test)
	$(this).nextUntil('.end', '.li-test').css({ 'font-size': '25px', color: 'red' })
})

// prevUntil()
$('#test>li').click(function () {
	// 选择在this以上到指定(.top)截止的同级元素节点、可选参数：附加一个筛选条件(.li-test)
	$(this).prevUntil('.top', '.li-test').css({ 'font-size': '25px', color: 'red' })
})

// .siblings()
// 选中同级除自身以外的所有元素、可选参数：过滤(span)
$('#demo-ul>li').eq(4).css('color', 'red').siblings('span').css('color', '#ccc')

// .parent()
// 获取父级元素节点、可选参数：过滤(ul)
$('li').click(function () {
	var dom = $(this).parent('ul')
	console.log(dom)
})

// .parents()
$('#demo .commodity span.but').click(function () {
	// .parents()  选出this所有父级的元素节点、可选参数：过滤(.commodity)
	var dataId = $(this).parents('.commodity').attr('data-id')
	console.log(dataId)
})

// .closest()
// 查找距离this最近的父级元素(p)节点、(也可以是自身)
var dom = $('#demo .commodity span.but').eq(0).closest('p')
console.log(dom)

// .slice()
// 在选择器中截取指定区域(n,m)的成员(元素节点)
$('ul>li').slice(4, 7).css('background', 'red')

// 都可以获取成员数、效果一样
$('ol>li').length
$('ol>li').size()

// .serialize()
// 将form表单打包成数据返回str出来、
var data = $('form').serialize()
console.log(data) // wd=阿里&spt=1&id=123

// .serializeArray()
// 将form表单打包成数据返回 数组(Array)形式、
var data = $('form').serializeArray()
console.log(data) // [{name: "wd",value: "阿里云"}, {name: "spt",value: "1"}, {name: "id",value: "123"}, {name: "issp",value: "1"}]
